<!--
 * @Description  :
 * @Version      : 1.0
 * @Author       : seraph
 * @Date         : 2024-12-13 16:10:18
 * @LastEditors  : seraph
 * @LastEditTime : 2024-12-24 12:28:12
-->
<template>
  <h4>v-bind 修饰符</h4>
  <h4>以下是 3 个常用的表单修饰符的示例：</h4>
  <hr />

  <!-- TAG: ======================================================== -->
  <h4>.lazy: 在输入字段上，代替 `v-model` 将输入事件从 `input` 变更为 `change`</h4>
  <h4>
    &lt;input v-model="msg" placeholder='v-model="msg"'&gt;
    <input v-model="msg" placeholder='v-model="msg"'>
  </h4>
  <h4>
    &lt;input v-model.lazy="lazyMsg" placeholder='v-model.lazy="lazyMsg"'&gt;
    <input v-model.lazy="lazyMsg" placeholder='v-model.lazy="lazyMsg"'>
  </h4>
  <h4>立即更新的数据：【{{ msg }}】。失去焦点时才更新的数据：【{{ lazyMsg }}】</h4>
  <hr />

  <!-- TAG: ======================================================== -->
  <h4>.number: 通常用于 v-bind 或 v-model 指令。在输入字段上，将绑定值转换为数字类型。</h4>
  <h4>firefox 下输入限制无效，可输入非数字字符。</h4>
  <h4>&lt;input id="numInput" <span style="color: red; font-weight: bolder;"> type="number" v-model.number="age"</span>
    placeholder="Enter your age as number"&gt;
  </h4>
  <h4><input id="numInput" type="number" v-model.number="age" placeholder="Enter your age as number"></h4>
  <h4>
    <p>Input age is : {{ ValidAge }}</p>
  </h4>
  <hr />

  <!-- TAG: ======================================================== -->
  <h4>.trim: 用于 v-model 指令。在输入字段上，将输入值自动去除首尾空格。</h4>
  <h4>
    &lt;input v-model.trim="msg1" placeholder='v-model="msg1"'&gt;
    <input v-model.trim="msg1" placeholder='v-model="msg1"'>
  </h4>
  <h4>Input content is : |{{ msg1 }}|</h4>
  <h4></h4>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch, computed } from 'vue'

const msg = ref(''); // 立即更新的数据
const lazyMsg = ref(''); // 失去焦点时更新的数据

watch(msg, (newVal, oldVal) => {
  console.log(Date.now(), '立即更新的数据', newVal, oldVal);
});

watch(lazyMsg, (newVal, oldVal) => {
  console.log(Date.now(), '失去焦点时更新的数据', newVal, oldVal);
});

const age = ref(20);
const ValidAge = ref(20);
watch(age, (newVal, oldVal) => {
  if (!isNaN(newVal)) {
    ValidAge.value = newVal;
  }
  console.log(Date.now(), 'age is valid', newVal, oldVal);
});

const msg1 = ref('');
watch(msg1, (newVal, oldVal) => {
  console.log(Date.now(), 'Input content is', '|' + newVal + '|', oldVal);
});




</script>

<style scoped>
#blue {
  color: blue;
}

#red {
  color: red;
}

#green {
  color: green;
}

.bold {
  font-weight: bold;
}

/* Chrome, Safari, Edge, Opera */
#numInput[type="number"]::-webkit-outer-spin-button,
#numInput[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* firefox 兼容性 */
#numInput[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

button {
  margin-right: 10px;
  min-width: 80px;
  font-size: 16px;
  line-height: 150%;
}
</style>
